<script setup lang="ts">
import tools from './tools.vue';
import plotting from './plotting/index.vue'
import Road from './road/index.vue'
import dataLayer from './dataLayer/index.vue'

</script>

<template>
  <div class="TabsBox">
    <div class="tabs-container">
      <Tools />
      <DataLayer />
      <Road />
      <Plotting />
    </div>
  </div>
</template>

<style scoped>
/* .TabsBox {
  position: fixed;
  right: 0;
  top: 15%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--app-background);
  width: 80px;
  padding: 30px 0;
  border-radius: 10px 0 0 10px;
  box-shadow: var(--card-shadow);
  z-index: 90;
  transition: all 0.3s ease;
  pointer-events: auto;
} */

.TabsBox {
  position: fixed;
  right: 0;
  top: 25%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--app-background);
  width: 80px;
  padding: 30px 0;
  border-radius: 10px 0 0 10px;
  box-shadow: var(--card-shadow);
  z-index: 90;
  transition: all 0.3s ease;
  pointer-events: auto
}

.tabs-container {
  display: flex;
  flex-direction: column;
}

.TabsBox :deep(.el-button) {
  border: 1px solid var(--secondary-color);
  color: #fff;
  border-radius: var(--small-radius);
  transition: all 0.3s ease;
  box-shadow: var(--button-shadow);
}

.TabsBox :deep(.el-button:hover) {
  background-color: var(--secondary-color);
  transform: scale(1.05);
}

.TabsBox :deep(.el-button:active) {
  transform: scale(0.95);
}

.TabsBox :deep(.TabbarBtn .iconBox) {
  transition: all 0.3s ease;
}

.TabsBox :deep(.TabbarBtn .iconBox:hover) {
  background-color: var(--secondary-color);
  transform: scale(1.05);
}

.TabsBox :deep(.TabbarBtn .btnTooltip) {
  background-color: var(--app-background);
  box-shadow: var(--card-shadow);
  border-radius: var(--small-radius);
}

.TabsBox :deep(svg) {
  color: var(--highlight-color);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
</style>
